﻿@using HCMS.Extensions
@* 多图上传 *@
@{
    // 图片字段名称
    string fieldName = ViewData["fieldName"].ToString("");
    // 图片路径
    string imgPath = ViewData["imgPath"].ToString("");
}

<div class="layui-upload">

    <button type="button" class="layui-btn" id="upload_multipleimg_btn_@fieldName">
        <i class="layui-icon layui-icon-upload"></i> 多图上传
    </button>

    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
        预览图：
        <div class="layui-upload-list" id="upload_multipleimg_preview_@fieldName"></div>
    </blockquote>

    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="upload_multipleimg_progress_@fieldName">
        <div class="layui-progress-bar" lay-percent=""></div>
    </div>
</div>

<style>
    .layui-upload-list .item { position: relative; display: inline-block; margin: 4px 8px; cursor: pointer; }
        .layui-upload-list .item:hover .btn-remove { display: inline-block; }
        .layui-upload-list .item .btn-remove { display: none; position: absolute; top: -20px; right: -12px; width: 20px; height: 20px; font-size: 24px; color: red; cursor: pointer; }
</style>

<script>
    layui.use(['form', 'jquery'], function () {
        var fieldName = '@fieldName';
        var suffix = '_@fieldName';
        var imgPath = '@imgPath';
        var domain = '@(UrlExt.ImagesDomain)';

        let $ = layui.jquery;
        var layer = layui.layer;
        let upload = layui.upload;
        var element = layui.element;

        initShow();
        preview();
        removeImgItem();
        uploadFn();

        // 初始化显示图集
        function initShow() {
            if (!imgPath) { return false; }

            if (imgPath.indexOf('?') > -1) {
                imgPath = imgPath.substring(0, imgPath.indexOf('?'));
            }

            var imgArr = imgPath.split(',');
            for (var i = 0; i < imgArr.length; i++) {
                createImageItem(imgArr[i]);
            }
        }

        // 生成图片项目
        function createImageItem(url) {
            var result = [];
            result.push('<div class="item">');
            result.push('   <i class="btn-remove layui-icon layui-icon-clear js-btn-remove" title="删除"></i>');
            result.push('   <img src="' + previewUrl(url) + '" style="width: 90px; height: 90px;">');
            result.push('   <input type="hidden" name="' + fieldName + '" value="' + url + '">');
            result.push('</div>');
            $('#upload_multipleimg_preview' + suffix).append(result.join(''));
        }

        // 预览图 路径处理
        function previewUrl(url) {
            if (url.indexOf(domain) > -1) {
                return url;
            }
            return domain + url;
        }

        // 删除
        function removeImgItem() {
            $('.item .js-btn-remove', '#upload_multipleimg_preview' + suffix).unbind('click').click(function () {
                var $imgItemBox = $(this).parent();
                $imgItemBox.remove();
                return false;
            });
        }

        // 图片预览
        function preview() {
            $('.item', '#upload_multipleimg_preview' + suffix).unbind('click').click(function () {
                var $this = $(this);
                var index = $this.index();
                var src = $this.find('img').attr('src');

                var data = [];
                var $imgItem = $('.item', '#upload_multipleimg_preview' + suffix);
                for (var i = 0; i < $imgItem.length; i++) {
                    var $img = $($imgItem[i]).find('img');

                    data.push({
                        "pid": index,
                        "src": $img.attr('src')
                    });
                }

                layer.photos({
                    photos: {
                        "start": index, // 初始显示的图片序号，默认 0
                        "data": data   // 相册包含的图片，数组格式
                    }
                });
            });
        }

        // 上传
        function uploadFn() {
            var uploadInst = upload.render({
                elem: '#upload_multipleimg_btn' + suffix,
                url: 'http://localhost:5020/api/upload/imgs/',
                field: 'files',
                multiple: true,
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    // obj.preview(function (index, file, result) {
                    //     createImageItem(result);// 图片链接（base64）
                    // });
                    element.progress('upload_multipleimg_progress' + suffix, '0%'); // 进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (!res.success) {
                        return layer.msg('上传失败：' + res.errorMsg);
                    }
                    // 上传成功的一些操作
                    // …
                    $('#upload_img_tips' + suffix).html(''); // 置空上传失败的状态
                    createImageItem(res.url);
                    preview();
                    removeImgItem();
                },
                error: function () {
                    // 失败状态，并实现重传
                    // var $tips = $('#upload_img_tips' + suffix);
                    // $tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    // $tips.find('.demo-reload').on('click', function () {
                    //     uploadInst.upload();
                    // });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('upload_multipleimg_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            });
        }
    });
</script>